<template>
    <div class="postRightContent">
        <div class="articles">
            <div v-for="(item,index) in articleArr.data"
            :key="index">
                <div v-if="item.images.length == 0" >
                    <postItem class="shadowContent"
                    :articleItem="item"/>
                </div>
                <div v-if="item.images.length > 0 &&  item.images.length <= 2">
                    <div v-if="index % 2 == 0" >
                        <postItem1 class="shadowContent"
                        :articleItem="item"
                        :leftOfRight= 'false'/>
                    </div>
                    <div v-else >
                        <postItem1 class="shadowContent"
                        :articleItem="item"
                        :leftOfRight= 'true'/>
                    </div>
                </div>
                <div v-if="item.images.length >= 3" >
                    <postItem3 class="shadowContent"
                    :articleItem="item"/>
                </div>
            </div>
        </div>
        <div class="block">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            :page-size="5"
            :total="articleArr.total"
            @current-change="handleCurrentChange">
        </el-pagination>
        </div>
    </div>
</template>

<script>
// 纯文字游记
import postItem from '@/components/post/postItem'
// 有一张图片或两张图片的游记
import postItem1 from '@/components/post/postItem1'
// 有三张图片的游记
import postItem3 from '@/components/post/postItem3'
export default {
    props: {
        articleArr: {
            type: Object,
            default: {}
        },
        flag: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            currentPage: 0
        }
    },
    methods:{
        handleCurrentChange(val){
            this.$emit('nextPage',val);
        }
    },
    components:{
        postItem,
        postItem1,
        postItem3
    },
    watch:{
        articleArr(){
            console.log(this.articleArr.total);
        },
        flag(){
            this.flag ? this.currentPage = 0 : ''
        }
    }
}
</script>

<style scoped lang="less">
    .postRightContent{
        margin-left: 10px;
        width: 100%;
        .articles{
            .shadowContent{
                margin-bottom: 20px;
                background-color: #fff;
                box-shadow: 0 1px 3px rgba(193, 168, 168, 0.5), 0 16px 32px -4px rgba(150, 131, 131, 0.1);
                -webkit-box-shadow: 0 1px 3px rgba(193, 168, 168, 0.5), 0 16px 32px -4px rgba(150, 131, 131, 0.1);
                border-radius: 10px;
                overflow: hidden;
                transition: .15s ease-in-out,box-shadow .15s ease-in-out;
                -webkit-transition: all .15s ease-in-out,box-shadow .15s ease-in-out;
            }
            .shadowContent:hover{
                box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 4px 8px rgba(49, 38, 38, .2);
            }
        }
    }
</style>